<!--
 * @Author: HZH
 * @Date: 2021-09-17 16:11:30
 * @LastEditors: HZH
 * @LastEditTime: 2021-09-24 09:36:41
 * @Description: 
-->
<template>
  <div class="Home">
    <div class="bg">
      <Header></Header>
      <div class="content">
        <div class="wrapper">
          <div class="bannner">
            <el-carousel indicator-position="outside" height="410px">
              <el-carousel-item v-for="item in banner" :key="item.id">
                <img :src="item.url" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="detailcontent">
            <div class="left">
              <div class="title">
                <div class="left">科大要闻</div>
                <div class="right">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;more+
                </div>
              </div>
              <div class="content">
                <div class="left">
                  <el-carousel height="250px">
                    <el-carousel-item
                      v-for="banneritem in banner"
                      :key="banneritem.id"
                    >
                      <img :src="banneritem.url" alt="" />
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="right">
                  <ul>
                    <li v-for="artItem in FCData" :key="artItem.id" @click="toArticle(artItem)">
                      {{ artItem.title }}
                      <!-- <p>{{artItem.publishTime | fmtDate}}</p> -->
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="title">
                <p>通知公告</p>
                <p>more+</p>
              </div>
              <ul>
                <li
                  class="right_list"
                  v-for="ggitem in GGData"
                  :key="ggitem.id"
                  @click="toArticle(ggitem)"
                >
                  {{ ggitem.title }}
                </li>
              </ul>
            </div>
          </div>
          <div class="detailcontentSC" style="margin-top: 15px">
            <div class="learn">
              <div class="title">
                <div class="left">学术活动</div>
                <div class="right">more+</div>
              </div>
              <div class="content">
                <ul class="content_learn">
                  <li v-for="item in XSData" :key="item.id" @click="toArticle(item)">
                    {{ item.title }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="news">
              <div class="title">
                <div class="left">校园快讯</div>
                <div class="right">more+</div>
              </div>
              <div class="content">
                <ul class="content_learn">
                  <li v-for="item in XYData" :key="item.id" @click="toArticle(item)"> 
                    {{ item.title }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="media">
              <div class="title">
                <div class="left">媒体科大</div>
                <div class="right">more+</div>
              </div>
              <div class="content">
                <ul class="content_learn">
                  <li v-for="item in MTData" :key="item.id" @click="toArticle(item)">
                    {{ item.title }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  components: {
    Header,

    Footer,
  },
  data() {
    return {

      banner: [],
      titleData: {},
      FCData: [],
      GGData: [],
      XSData: [],
      XYData: [],
      MTData: [],
      list: {
        page: 1,
        pageSize: 10,
        categoryId: 3,
      },
    };
  },
  methods: {
    
    getBannerIMG() {
      get("/index/carousel/findAll").then((res) => {
        // console.log(res);
        this.banner = res.data;
      });
    },
    getFCData() {
      this.list.categoryId = 3;
      get("/index/article/pageQuery", this.list).then((res) => {
        // console.log(res);
        this.FCData = res.data.list;
        // console.log(this.FCData);
      });
    },
    getGGData() {
      this.list.categoryId = 4;
      get("/index/article/pageQuery", this.list).then((res) => {
        // console.log(res);
        this.GGData = res.data.list;
        // console.log(this.FCData);
      });
    },

    getXSData() {
      this.list.categoryId = 5;
      get("/index/article/pageQuery", this.list).then((res) => {
        // console.log(res);
        this.XSData = res.data.list;
        // console.log(this.FCData);
      });
    },
    getXYData() {
      this.list.categoryId = 7;
      get("/index/article/pageQuery", this.list).then((res) => {
        // console.log(res);
        this.XYData = res.data.list;
        // console.log(this.FCData);
      });
    },
    getMTData() {
      this.list.categoryId = 6;
      get("/index/article/pageQuery", this.list).then((res) => {
        // console.log(res);
        this.MTData = res.data.list;
        // console.log(this.FCData);
      });
    },
    toArticle(artItem){
      this.$router.push({
        path:'/Article',
        query:artItem
      })
    }
  },
  created() {
    this.getBannerIMG();
    // this.gettitleData();
    this.getFCData();
    this.getGGData();
    this.getXSData();
    this.getXYData();
    this.getMTData();
  },
};
</script>

<style lang="scss" scoped>
.Home {
  // background-color: #f5f7ff;
  // background: url('../../public/新建画布1.png') no-repeat;
  .bg {
    background: url("../../public/新建画布1.png") no-repeat;
    // width: 100%;
    background-size: 100% 100%;
    // height: 5000px;

    .content {
      margin-top: 20px;
      .wrapper {
        .banner {
        }
        .detailcontent {
          background-color: #f5f7ff;
          border-radius: 5px;
          padding: 10px;
          display: flex;

          .left {
            flex: 2;
            // justify-self: space-between;
            // display: flex;
            .title {
              display: flex;
              font-size: 20px;
              font-weight: bold;
              color: #31499a;
              justify-content: space-between;
              // justify-content: space-around;

              .right {
                cursor: pointer;
                font-size: 14px;
                color: #666;
                font-weight: normal;
                margin-top: 10px;
              }
            }
            .content {
              display: flex;
              // justify-content: space-between;
              .left {
                flex: 1;
                img {
                  height: 250px;
                  width: 480px;
                }
              }
              .right {
                padding-left: 20px;
                ul {
                  // line-height: 2em;
                  font-size: 14px;
                  width: 300px;
                  color: black;
                  li {
                    overflow: hidden;
                    white-space: nowrap;
                    // // text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    margin-bottom: 20px;
                  }
                  li:hover {
                    color: #31499a;
                  }
                }
              }
            }
          }
          .right {
            flex: 1;
            .title {
              color: #31499a;
              font-weight: bold;
              font-size: 20px;
              margin-left: 15px;
              display: flex;
              justify-content: space-between;
              p {
                margin: 0;
                padding: 0;
              }
              p:last-child {
                cursor: pointer;
                font-size: 14px;
                color: #666;
                font-weight: normal;
                margin-top: 10px;
              }
            }
            ul {
              padding-left: 20px;
              font-size: 14px;
              li {
                color: black;
                overflow: hidden;
                white-space: nowrap;
                // // text-overflow: ellipsis;
                text-overflow: ellipsis;
                cursor: pointer;
                // margin-bottom: 20px;
              }
              .right_list {
                // margin-top: 20px;
                padding-top: 20px;
              }
              li:hover {
                color: #31499a;
              }
            }
          }
        }
        .detailcontentSC {
          background-color: #f5f7ff;
          border-radius: 5px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          .learn {
            flex: 1;
            .title {
              display: flex;
              justify-content: space-between;
              .left {
                font-size: 20px;
                font-weight: bold;
                color: #31499a;
              }
              .right {
                padding-right: 20px;
                padding-top: 10px;
                cursor: pointer;
              }
            }
            .content {
              ul {
                width: 360px;
                li {
                  color: black;
                  overflow: hidden;
                  white-space: nowrap;
                  // // text-overflow: ellipsis;
                  text-overflow: ellipsis;
                  cursor: pointer;
                  margin-bottom: 20px;
                }
                li:hover {
                  color: #31499a;
                }
              }
            }
          }
          .news {
            flex: 1;
            .title {
              display: flex;
              justify-content: space-between;
              .left {
                font-size: 20px;
                font-weight: bold;
                color: #31499a;
              }
              .right {
                padding-right: 20px;
                padding-top: 10px;
                cursor: pointer;
              }
            }
            .content {
              ul {
                width: 360px;
                li {
                  color: black;
                  overflow: hidden;
                  white-space: nowrap;
                  // // text-overflow: ellipsis;
                  text-overflow: ellipsis;
                  cursor: pointer;
                  margin-bottom: 20px;
                }
                li:hover {
                  color: #31499a;
                }
              }
            }
          }
          .media {
            flex: 1;
            .title {
              display: flex;
              justify-content: space-between;
              .left {
                font-size: 20px;
                font-weight: bold;
                color: #31499a;
              }
              .right {
                padding-right: 20px;
                padding-top: 10px;
                cursor: pointer;
              }
            }
            .content {
              ul {
                width: 360px;
                li {
                  color: black;
                  overflow: hidden;
                  white-space: nowrap;
                  // // text-overflow: ellipsis;
                  text-overflow: ellipsis;
                  cursor: pointer;
                  margin-bottom: 20px;
                }
                li:hover {
                  color: #31499a;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>